<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>音乐信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>音乐喜欢</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :data="MusSongLike" style="width: 100%" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="uid" label="用户名">
          <template slot-scope="scope">
            {{UserName[scope.$index]}}
          </template>
        </el-table-column>
        <el-table-column prop="musicid" label="歌单名/音乐名">
          <template slot-scope="scope">
          {{MusName[scope.$index]}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type===1">歌单</span>
            <span v-if="scope.row.type===2">音乐</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ASongLike",
  data(){
    return{
      MusName:[],
      UserName:[]
    }
  },
  computed:{...mapState({
      MusSongLike:state=>state.music.MusSongsLike,
    })},
  beforeCreate() {
    this.$store.dispatch('music/getMusSongLike',this.query)
  },
  created() {
      this.getMusName()
  this.getUser()
  },
  methods:{
    getUser(){
      this.MusSongLike.map(item=>{
        console.log(item)
        this.$http.get('/api/user/search?id='+item.uid).then((res)=>{
          this.UserName.push(res.data.data.username)
        }).catch((error) => {
          console.log(error);
        });
      })
    },
    getMusName(){
      this.MusSongLike.map((item)=>{
        if(item.type===1){
          this.$http.get('/api3/playlist/detail?id='+item.musicid).then((res)=>{
            this.MusName.push(res.data.playlist.name)
          }).catch((error)=>{
            console.log(error)
          })
        }else if(item.type===2){
          this.$http.get('/api3/song/detail?ids='+item.musicid).then((res)=>{
            this.MusName.push(res.data.songs[0].name)
          }).catch((error)=>{
            console.log(error)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
